<template>
    <!-- 下拉筛选框 -->
    <view class="page">
        <view class="nav">
            <view :class="'nav-son ' + (shownavindex == 1 ? 'active' : '')" @tap="listqy" data-nav="1">
                <view class="content">地铁 {{ select1 }}-{{ select2 }}-{{ select3 }}</view>
                <view class="icon"></view>
            </view>
        </view>
        <!-- 地铁区域-》区域、地铁标签 -->
        <view :class="'quyu ' + (qyopen ? 'slidown' : 'slidup') + ' ' + (qyshow ? 'disappear' : '')">
            <view class="qy quyu-left">
                <view :class="select1 == index ? 'current' : ''" @tap="selectleft" :data-city="index" v-for="(item, index) in cityleft" :key="index">
                    {{ index }}
                </view>
            </view>
            <view class="qy quyu-center">
                {{ citycenter1 }}
                <view :class="select2 == index ? 'current2' : ''" @tap="selectcenter1" :data-city="index" v-for="(item, index) in citycenter1" :key="index">
                    {{ index }}
                </view>
            </view>
            <view class="qy quyu-center">
                <view :class="select3 == index ? 'current2' : ''" @tap="selectcenter2" :data-city="index" v-for="(item, index) in citycenter2" :key="index">
                    {{ index }}
                </view>
            </view>
            <view class="qy quyu-center">
                <view :class="select4 == index ? 'current2' : ''" @tap="selectcenter3" :data-city="index" v-for="(item, index) in citycenter3" :key="index">
                    {{ index }}
                </view>
            </view>
            <view class="qy quyu-right">
                <view :class="select5 == index ? 'current3' : ''" @tap="selectright" :data-city="index" v-for="(item, index) in cityright" :key="index">
                    <label>{{ item }}</label>

                    <image src="/static/images/selectRight.png" :style="select3 == index ? 'display:block' : 'display:none'"></image>
                </view>
            </view>
            <view class="form-btn">
                <button class="btn-reset" @tap="quyuEmpty">重置</button>
                <button class="btn-submit" @tap="submitFilter">确定</button>
            </view>
        </view>

        <view :class="'fullbg ' + (isfull ? 'fullopacity' : '')" @tap="hidebg"></view>
    </view>
</template>

<script>
var cityData = require('../../utils/city.js'); //引入自己定义的深圳地铁区域及号线数据信息

export default {
    data() {
        return {
            cityIndex: [0, 0, 0, 0, 0],
            content: [],
            qyopen: false,

            //点击地铁区域筛选滑动弹窗显示效果，默认不显示
            qyshow: true,

            //用户点击闭关区域的弹窗设置，默认不显示
            isfull: false,

            cityleft: cityData.getCity(),

            //获取地铁区域的下拉框筛选项内容
            citycenter1: {},

            //选择地铁区域左边筛选框后的显示的中间内容部分1
            citycenter2: {},

            //选择地铁区域左边筛选框后的显示的中间内容部分2
            citycenter3: {},

            //选择地铁区域左边筛选框后的显示的中间内容部分3
            cityright: {},

            //选择地铁区域的中间内容部分后显示的右边内容
            select1: '区域',

            //地铁区域选中后的第二个子菜单，默认显示地铁下的子菜单
            select2: '',

            //地铁区域选择部分的中间1
            select3: '',

            //地铁区域选择部分的中间2
            select4: '',

            //地铁区域选择部分的中间3
            select5: '',

            //地铁区域选择部分的右边
            shownavindex: '',

            // 价格筛选框设置
            leftMin: 0,

            leftMax: 10000,

            //左边滑块最大值
            rightMin: 0,

            //右边滑块的最小值
            rightMax: 10000,

            //右边滑块最大值
            leftValue: 1000,

            //左边滑块默认值
            rightValue: 6000,

            //右边滑块默认值
            leftPer: '50',

            //左边滑块可滑动长度：百分比
            rightPer: '50',

            //右边滑块可滑动长度
            //排序内容下拉框，默认第一个
            pxIndex: 0,

            citycenter: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        this.setData({
            citycenter1: this.cityleft[cityIndex[1]]
        });
        this.setData({
            citycenter2: this.citycenter1[cityIndex[2]]
        });
        this.setData({
            citycenter3: this.citycenter2[cityIndex[3]]
        });
        this.setData({
            cityright: this.citycenter2[cityIndex[4]]
        });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    methods: {
        /**
         * 用户点击右上角分享
         */
        // onShareAppMessage: function() {
        // },
        // 地铁区域列表下拉框是否隐藏
        listqy: function (e) {
            if (this.qyopen) {
                this.setData({
                    qyopen: false,
                    shownavindex: 0
                });
            } else {
                this.setData({
                    qyopen: true,
                    qyshow: false,
                    isfull: true,
                    shownavindex: e.currentTarget.dataset.nav
                });
            }
        },

        // 地铁区域第一栏选择内容
        selectleft: function (e) {
            console.log('用户选中左边菜单栏的索引值是：' + e.target.dataset.city);
            this.setData({
                cityright: {},
                citycenter: this.cityleft[e.currentTarget.dataset.city],
                select1: e.target.dataset.city,
                select2: ''
            });
        },

        // 地铁区域中间栏选择的内容
        selectcenter1: function (e) {
            this.setData({
                cityright: this.citycenter[e.currentTarget.dataset.city],
                select2: e.currentTarget.dataset.city
            });
        },

        // 地铁区域中间栏选择的内容
        selectcenter2: function (e) {
            this.setData({
                cityright: this.citycenter[e.currentTarget.dataset.city],
                select3: e.currentTarget.dataset.city
            });
        },

        // 地铁区域中间栏选择的内容
        selectcenter3: function (e) {
            this.setData({
                cityright: this.citycenter[e.currentTarget.dataset.city],
                select4: e.currentTarget.dataset.city
            });
        },

        // 地铁区域左边栏选择的内容
        selectright: function (e) {
            console.log('选中地铁线下的地铁站' + e.currentTarget.dataset.city);
            this.setData({
                select5: e.currentTarget.dataset.city
            });
        },

        // 点击灰色背景隐藏所有的筛选内容
        hidebg: function (e) {
            this.setData({
                qyopen: false,
                qyshow: true,
                isfull: false,
                shownavindex: 0
            });
        },

        // 地铁区域清空筛选项
        quyuEmpty: function () {
            this.setData({
                select1: '',
                select2: '',
                select3: '-1'
            });
        },

        // 地铁区域选择筛选项后，点击提交
        submitFilter: function () {
            console.log('选择的一级选项是：' + this.select1);
            console.log('选择的二级选项是：' + this.select2);
            console.log('选择的三级选项是：' + this.select3); // 隐藏地铁区域下拉框

            this.setData({
                qyopen: false,
                qyshow: false,
                isfull: false,
                shownavindex: 0
            });
        },

        // 左边滑块滑动的值
        leftSchange: function (e) {
            console.log('左边改变的值为：' + e.detail.value);
            let currentValue = parseInt(e.detail.value);
            let currentPer = parseInt(currentValue);
            var that = this;
            that.setData({
                leftValue: e.detail.value //设置左边当前值
            });
        }
    }
};
</script>
<style>
@import './longRent.css';
</style>
